<template>
    <v-content>
        <v-snackbar color="blue" v-model="snackbar" :timeout="3000" top>
            {{ hintText }}
            <v-btn color="white" text @click="snackbar = false">关闭</v-btn>
        </v-snackbar>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="4">
                    <v-card class="elevation-12">
                        <v-toolbar color="primary" dark flat>
                            <v-toolbar-title>登录</v-toolbar-title>
                            <v-spacer/>
                        </v-toolbar>
                        <v-card-text>
                            <v-form>
                                <v-text-field label="用户名" name="login" type="text" v-model="username"/>
                                <v-text-field label="密码" name="password" type="password" v-model="password"/>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer/>
                            <v-btn color="primary" @click="doLogin">提交</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-content>
</template>

<script>
    export default {
        name: "Login",
        data: () => ({
            username: null,
            password: null,
            snackbar: false,
            hintText: "请填写用户名或密码！",
        }),
        methods: {
            doLogin() {
                let postData = {"username": this.username, "password": this.password};
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8080/doLogin',
                    data: JSON.stringify(postData),
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }).then((res) => {
                    console.log(JSON.stringify(res.data));
                    if (res.data.statusCodeValue === 401) {
                        this.hintText='用户名或密码错误！';
                        this.snackbar = true
                    }else if (res.data.statusCodeValue === 200){
                        this.hintText='登录成功！';
                        localStorage.setItem("x-auth-token",res.data.x_auth_token);
                        this.$addStorageEvent(1, "sysUser", JSON.stringify(res.data.sysUser));
                        setTimeout(()=>{
                            this.$router.push({path: "/"})
                        },1000);
                        this.snackbar = true;
                    }
                });
            },
        },
    }

</script>

<style scoped>

</style>